<template>
	<view class="publish">
		<view class="publishBg"></view>
		<view class="dom p30">
			<view class="banner card p20">
				<image src="/errand/static/errand2.png" mode=""></image>
			</view>
			<view class="butList dis">
				<view class="butItem" :class="tab == 1 ? 'active' : ''" @click="changeTab(1)">跑腿</view>
				<view class="butItem" :class="tab == 2 ? 'active' : ''" @click="changeTab(2)">帮我送</view>
				<view class="butItem" :class="tab == 3 ? 'active' : ''" @click="changeTab(3)">帮我买</view>
				<view class="butItem" :class="tab == 4 ? 'active' : ''" @click="changeTab(4)">帮我取</view>
			</view>
			<view class="form">
				<view class="formItem card p20">
					<view class="item1">
						<view class="lable">
							<text class="red">*</text>
							取货地址
						</view>
						<view class="value value1 mT20 dis">
							<view class="itemL">
								<up-input placeholder="点击填写取货地址" border="none" v-model="formData.address1"></up-input>
							</view>
							<view class="itemR"><up-icon name="arrow-right"></up-icon></view>
						</view>
					</view>
					<!-- <view class="item1 mT20 item2">
						<view class="lable">
							<text class="red">*</text>
							取货地址
						</view>
						<view class="value value1 mT20 dis">
							<view class="itemL">
								<up-input placeholder="点击填写取货地址" border="none" v-model="value"></up-input>
							</view>
							<view class="itemR"><up-icon name="arrow-right"></up-icon></view>
						</view>
					</view> -->
				</view>
				<!-- <view class="formItem card p20">
					<view class="lable">
						<text class="red">*</text>
						需求车型
					</view>
					<view class="value mT20">
						<view class="butListC dis">
							<view class="itemButC avtive">小推车</view>
							<view class="itemButC">电车</view>
							<view class="itemButC">三轮</view>
							<view class="itemButC">汽车</view>
						</view>
					</view>
				</view> -->
				<view class="formItem card p20">
					<view class="lable">
						<text class="red">*</text>
						需要帮忙的事情
					</view>
					<view class="value mT20">
						<up-textarea
							v-model="formData.orderContent"
							border="none"
							placeholder="点击输入您的需求，如帮忙去哪里领快递，送一个东西去哪里。请勿发布代考，代写论文等违法信息，此内容将同步群内，不要填写隐私信息"
							autoHeight
						></up-textarea>
					</view>
					<view class="fast">
						<view class="fastLab">快捷输入:</view>
						<view class="fastBut dis mT20">
							<view class="fastButI">带饭</view>
							<view class="fastButI">XXX代购</view>
							<view class="fastButI">XX门取快递</view>
							<view class="fastButI">XX门取快递</view>
						</view>
					</view>
				</view>
				<view class="formItem card p20">
					<view class="lable">
						<text class="red">*</text>
						隐私备注
					</view>
					<view class="value mT20">
						<up-textarea v-model="formData.privacyRemark" border="none" placeholder="请填写隐私备注，如快递取件码" autoHeight></up-textarea>
					</view>
				</view>
				<view class="formItem card p20">
					<view class="lable">联系号码</view>
					<view class="value mT20">
						<up-input placeholder="请填写联系人手机号码" border="none" v-model="formData.contactPhone"></up-input>
					</view>
				</view>
				<view class="formItem card p20">
					<view class="lable">需要帮忙的时间</view>
					<view class="value mT20">
						<up-input placeholder="填写具体时间，越详细越好" border="none" v-model="formData.mutualTime"></up-input>
					</view>
				</view>
				<view class="formItem card p20">
					<view class="lable">
						<text class="red">*</text>
						确认报酬
					</view>
					<view class="value mT20">
						<view class="butListM dis">
							<view class="itemButM" :class="money2 == 2 ? 'avtive' : ''" @click="changeMoney2(2)">2元</view>
							<view class="itemButM" :class="money2 == 3 ? 'avtive' : ''" @click="changeMoney2(3)">3元</view>
							<view class="itemButM" :class="money2 == 5 ? 'avtive' : ''" @click="changeMoney2(5)">5元</view>
							<view class="itemButM" :class="money2 == 7 ? 'avtive' : ''" @click="changeMoney2(7)">7元</view>
							<view class="itemButM" :class="money2 == 8 ? 'avtive' : ''" @click="changeMoney2(8)">8元</view>
							<view class="itemButM" :class="money2 == 10 ? 'avtive' : ''" @click="changeMoney2(10)">10元</view>
						</view>
						<view class="inPuts dis mT20">
							<view class="inPuts1">
								<up-input @blur="blur1" type="number" placeholder="自定义金额" border="none" v-model="money1"></up-input>
							</view>
							<view class="inPuts2">元</view>
						</view>
					</view>
				</view>
			</view>
			<view class="agreement dis">
				<view class="agL">
					<up-checkbox :customStyle="{ marginBottom: '8px' }" label="" name="agree" usedAlone v-model:checked="aloneChecked"></up-checkbox>
				</view>
				<view class="agR">
					我已阅读并同意
					<text class="agRT">《校园跑腿平台发单系统协议》</text>
				</view>
			</view>
		</view>
		<view class="submit dis">
			<view class="submitL dis">
				<view class="text">悬赏金额</view>
				<view class="val">¥ {{ formData.rewardCommission }}</view>
			</view>
			<view class="submitR">
				<view class="button" v-if="aloneChecked" @click="submit">提交</view>
				<view class="button noOk" v-else>提交</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { postBountyMission } from '@/config/api.js';
import { ref } from 'vue';
import { onShow, onLoad, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
const schoolInfo = ref({});
onLoad((options) => {
	const schoolStr = uni.getStorageSync('schoolInfo');
	if (!schoolStr) {
		// uni.navigateTo({
		// 	url: '/pages/selectSchool/index?isIndex=1'
		// });
	} else {
		const school = JSON.parse(schoolStr);
		schoolInfo.value = school;
		formData.value.departmentId = school.schoolId;
	}
	// console.log('页面参数:', options, schoolInfo.value.schoolId);
});

const value = ref('');
const formData = ref({
	departmentId: 0,
	helpType: 1,
	address1: '',
	address2: '',
	orderContent: '',
	mutualTime: '',
	contactPhone: '',
	privacyRemark: '',
	rewardCommission: '0.00', //钱
	imageUrls: null
});

const money1 = ref('');
const blur1 = (val) => {
	const num = Number(val);
	if (isNaN(num)) {
		uni.showToast({
			title: '请输入有效金额',
			icon: 'none'
		});
		money1.value = '';
	} else {
		formData.value.rewardCommission = Number(num).toFixed(2);
	}
};
const money2 = ref(0);
const changeMoney2 = (val) => {
	money2.value = val;
	formData.value.rewardCommission = Number(val).toFixed(2);
};

const aloneChecked = ref(false);
const submit = async () => {
	formData.value.helpType = tab.value;
	const res = await postBountyMission(formData.value);
	console.log(res);
	if (res.code == 0) {
		setTimeout(() => {
			uni.navigateBack({
				delta: 1
			});
		}, 1000);
	}
	uni.showToast({
		title: res.message,
		icon: 'none'
	});
};

const tab = ref(1);
const changeTab = (val) => {
	tab.value = val;
};
</script>

<style scoped lang="scss">
.publish {
	position: relative;
	padding-bottom: 130rpx;
	width: 100%;
	min-height: 50vh;
	overflow: hidden;
	z-index: 2;
	.publishBg {
		position: absolute;
		top: -1915rpx;
		left: 50%;
		width: 2072rpx;
		height: 2072rpx;
		transform: translateX(-50%);
		border-radius: 50%;
		// background: linear-gradient(44deg, #5384f7 0%, #5744e8 100%);
		background: #5466ef;
		z-index: 1;
	}
	.dom {
		position: relative;
		z-index: 3;
		.banner {
			width: 690rpx;
			height: 260rpx;
		}
	}
	.butList {
		justify-content: center;
		align-items: center;
		.butItem {
			margin-right: 30rpx;
			width: 136rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			background: #ffffff;
			border-radius: 16rpx;
			font-size: 28rpx;
			color: #4f77e0;
		}
		.active {
			background: linear-gradient(44deg, #5384f7 0%, #5744e8 100%);
			color: #fff;
		}
	}
	.form {
		margin-top: 30rpx;
		.formItem {
			.lable {
				font-weight: bold;
				font-size: 28rpx;
			}
			.value {
				font-size: 28rpx;
				textarea {
					font-size: 28rpx;
				}
				.butListC {
					.itemButC {
						margin-right: 20rpx;
						width: 144rpx;
						height: 66rpx;
						line-height: 66rpx;
						background: #ffffff;
						border-radius: 16rpx;
						border: 2rpx solid #d8d8d8;
						font-size: 24rpx;
						color: #666666;
						text-align: center;
					}
					.avtive {
						color: #4f77e0;
						background: #eeedfd;
						border-color: #4f77e0;
					}
				}
				.butListM {
					.itemButM {
						margin-right: 20rpx;
						padding: 16rpx 24rpx;
						font-size: 24rpx;
						color: #666666;
						border-radius: 8rpx;
						border: 2rpx solid #dfdfdf;
					}
					.avtive {
						color: #ed9056;
						border: 2rpx solid #ed9056;
					}
				}
				.inPuts {
					align-items: center;
					padding: 0 20rpx;
					width: 340rpx;
					height: 66rpx;
					line-height: 66rpx;
					border-radius: 8rpx;
					border: 2rpx solid #dfdfdf;
				}
			}
			.value1 {
				justify-content: space-between;
				align-items: center;
				.itemL {
					flex: 1;
				}
				.itemR {
					width: 36rpx;
					height: 36rpx;
				}
			}
			.item2 {
				padding-top: 20rpx;
				border-top: 2rpx solid #f4f4f4;
			}
			.fast {
				.fastLab {
					font-weight: 500;
					font-size: 20rpx;
					color: #666666;
				}
				.fastBut {
					.fastButI {
						margin-right: 15rpx;
						padding: 10rpx 20rpx;
						background: #f4f4f4;
						border-radius: 8rpx;
						font-size: 24rpx;
						color: #666666;
					}
				}
			}
		}
	}
	.agreement {
		align-items: center;
		.agR {
			margin-top: -8rpx;
			color: #606266;
			font-size: 30rpx;
			.agRT {
				color: #5384f7;
			}
		}
	}
	.submit {
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		justify-content: space-between;
		align-items: center;
		padding-left: 30rpx;
		padding-right: 15rpx;
		width: 100%;
		height: 124rpx;
		background: #ffffff;
		box-shadow: 0rpx -8rpx 24rpx 0rpx rgba(0, 0, 0, 0.05);
		z-index: 5;
		.submitL {
			.text {
				margin-top: 8rpx;
				margin-right: 20rpx;
				font-size: 24rpx;
				color: #999999;
			}
			.val {
				font-size: 36rpx;
				color: #e65e1f;
			}
		}
		.submitR {
			.button {
				width: 204rpx;
				height: 92rpx;
				line-height: 92rpx;
				background: linear-gradient(44deg, #5384f7 0%, #5744e8 100%);
				border-radius: 16rpx;
				font-size: 28rpx;
				color: #ffffff;
				text-align: center;
			}
			.noOk {
				background: linear-gradient(44deg, #a9befa 0%, #aaa4f4 100%);
			}
		}
	}
}
</style>
<style>
page {
	background: #f8f8fa;
}
image {
	width: 100%;
	height: 100%;
}
.mT20 {
	margin-top: 20rpx;
}
.red {
	color: #e53939;
}
.bor {
	background: linear-gradient(44deg, #5384f7 0%, #5744e8 100%);
	border: 2rpx solid;
	border-image: linear-gradient(44deg, rgba(83, 132, 247, 1), rgba(87, 68, 232, 1)) 2 2;
}
.modalBut {
	align-items: center;
	justify-content: space-around;
	width: 100%;
}
.custom_btn {
	width: 40%;
	height: 70rpx;
	line-height: 70rpx;
	border-radius: 35rpx;
	text-align: center;
	color: #fff;
	background-color: #3391e6;
}
.nodeBut {
	color: #515151;
	background-color: #f0f0f0;
}

.card {
	margin-bottom: 20rpx;
	background-color: #fff;
	border-radius: 15rpx;
}
.noData {
	width: 100%;
	color: #999;
	text-align: center;
}
</style>
